<template>
  <div>
    <div class="title">
      <Title title="商品信息" class="goods-title" />
      <PlainCreateBtn :disabled="!canEdit" @click="handleAdd">添加</PlainCreateBtn>
    </div>
    <dynamicEditTable
      ref="dynamicGoodsTable"
      v-model="goodsInfo"
      :list-data="goodsInfo"
      :list-setting="goodsSetting"
      :is-edit="canEdit"
      :fixed="false"
      :show-add-btn="false"
      :show-copy-btn="false"
      :show-serial="false"
      :show-disable-btn="false"
      :open-page="isEdit"
      :page-sizes="[10, 20, 50]"
      @selectChange="selectChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @delRowData="delGoodInfo"
      @handleCheckSecretVal="handleCheckSecretVal"
      @changeInputNumberData="changeInputNumberData"
    />
  </div>
</template>

<script>
import Title from '@/components/Title';
import dynamicEditTable from '@/components/Common/dynamicEditTable';
import { getSkuList } from '@/api/mengli';
import ElMessage from '@/utils/message';

export default {
  components: { Title, dynamicEditTable },
  model: {
    prop: 'goodsInfo',
    event: 'change'
  },
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    canEdit: {
      type: Boolean,
      default: true
    },
    goodsInfo: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      goodsSetting: [{
        label: 'SKU编码',
        type: 'scrollSelect',
        width: '150px',
        keyword: 'goodsCoding',
        isRequired: true,
        keyName: 'key',
        labelName: 'crmCode',
        foot: 'warehouse',
        valueType: 'object',
        renderKeyword: 'crmCode',
        notShowClear: false,
        loadmoreMethod: getSkuList
      }, {
        label: '数量',
        type: 'inputNumber',
        width: '150px',
        isRequired: true,
        keyword: 'quantity',
        maxnumber: 999999999,
        isPositiveNumber: true
      }, {
        label: '标题',
        type: 'onlyRead',
        width: '150px',
        isRequired: true,
        keyword: 'title'
      }, {
        label: '商品属性',
        type: 'onlyRead',
        width: '150px',
        isRequired: true,
        keyword: 'attribute'
      }]
    };
  },
  methods: {
    selectChange(val) {
      const { item } = val;
      item.title = item.goodsCoding.title;
      item.attribute = item.goodsCoding.attribute;
      item.warehouse = item.goodsCoding.warehouse;
      item.warehouseId = item.goodsCoding.warehouseId;
      item.goodsCoding_dynamic_options = [];
    },
    handleAdd() {
      if (this.goodsInfo.length > 49) {
        ElMessage.warning('商品信息最多可添加至50条，已达上限！');
      } else {
        this.goodsInfo.unshift({
          goodsCoding: '',
          attribute: '',
          title: '',
          quantity: 1,
          costPrice: '',
          totalCost: '',
          warehouseId: '',
          isAdd: true,
          warehouseId_dynamic_options: []
        });
      }
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val);
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val);
    },
    delGoodInfo(val) {
      this.$emit('delGoodInfo', val);
    },
    handleCheckSecretVal(rowData) {
      this.$emit('handleCheckSecretVal', rowData);
    },
    changeInputNumberData({ item, key }) {
      item[key] = Math.floor(Number(item[key]));
    },
    validate() {
      return this.$refs['dynamicGoodsTable'].validate();
    }
  }
};
</script>

<style lang="scss" scoped>
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .goods-title{
    margin: 0 auto;
  }
}
</style>
